﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>根据位置选择元素</title>
    <style type="text/css">
        p.selected {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div>
        <span>
            <p>Microsoft: Windows Azure, Bing, Windows Phone, Office 365</p>
        </span>
        <p>Google: App Engine, Google Search, Android, Google Docs</p>
        <p>Oracle：MySQL, Solaris, Java</p>
        <p>IBM：AIX, DB2, Websphere</p>
    </div>
    <p>Apple：iOS, MacOS, iCloud</p>
    <div>
        <input type="button" value="选出直接子元素" onclick="selectDirectChild()" />
        <input type="button" value="选出所有子元素(不论层级)" onclick="selectAllChild()" />
        <input type="button" value="选出集合中第一个元素" onclick="selectFirstElement()" />
        <input type="button" value="选出集合中第4个元素" onclick="selectNthElement()" />
    </div>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function selectDirectChild() {
            $("div p").toggleClass("selected");         // div元素下的所有子元素p，不论是否直接子元素
        }
        function selectAllChild() {
            $("div > p").toggleClass("selected");       // div元素下的直接子元素p
        }
        function selectFirstElement() {
            $("p:first").toggleClass("selected");       // 页面p元素集合中的第一个
        }
        function selectNthElement() {
            $("p:nth(3)").toggleClass("selected");      // 页面p元素集合中的第4个(下标索引为3)
            // 或者：
            // $("p:eq(3)").toggleClass("selected");
        }
    </script>
</body>
</html>
